<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{block name="title"}InitAdmin后台管理{/block}</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/display.css">
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }
        .flex {
            display: flex;
            display: -webkit-flex;
            align-items: center;
            text-decoration: none;
        }
        .flex-col {
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
        }
        .el-input input {
            border-radius: 20px;
        }
        .wrap {
            height: 100vh;
        }
        .main-aside {
            background-color: #042C60;
            border-right: solid 0px #e6e6e6;
        }
        .logo-box {
            text-align: center;
            justify-content: center;
            align-items: center;
            height: 60px;
        }
        .logo-box .title {
            color: #C0C4CC;
            font-size: 20px;
        }
        .logo-box .logo {
            height: 40px;
            margin-right: 10px;
        }
        .main-menu {
            user-select: none;
            border-right: 0 !important;
        }
        .main-menu a {
            color: #C0C4CC;
            text-decoration: none;
        }
        .main-menu .el-submenu .el-menu-item {
            background-color: rgba(255, 255, 255, .05) !important;
        }
        .main-menu .el-submenu .el-menu-item:hover {
            padding-left: 38px !important;
            border-left: 2px solid #C0C4CC !important;
        }
        .header {
            background: #fff;
            border-bottom: solid 0px #e6e6e6;
        }
        .header span,
        .header a {
            font-size: 15px;
            font-weight: 400;
            color: #606266;
            text-decoration: none;
        }
        .el-main {
            background: #f5f7f9;
            padding: 0px !important;
        }
        .main {
            padding: 15px;
        }
        .search {
            padding: 10px 10px 0px;

        }
        .search .el-input input {
            border: 0;
            color: #fff;
            background: rgba(255, 255, 255, .06);
        }
        .search .el-input input:focus {
            border: 0;
            box-shadow: none;
        }
        @media screen and (max-width: 768px) {
            .main-aside {
                display: none;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                z-index: 999;
            }
            .base-mask {
                display: none;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                z-index: 998;
            }
            .main-aside-display {
                display: block;
            }
        }
    </style>
    {block name="style"}{/block}
</head>
<body>
    <div id="app">
        <div class="wrap">
            <el-container style="height: 100vh;">
                <el-aside :class="isDisplay ? 'main-aside main-aside-display' : 'main-aside'" ref="main_aside" :style="{width: isCollapsed ? '70px': '200px'}">
                    <a class="logo-box flex" href="<?php echo request()->root(); ?>/admin/">
                        <img src="<?php echo request()->root(); ?>/static/logo.png" class="logo">
                        <span v-if="isCollapsed == false" class="title">InitAdmin</span>
                    </a>
                    <div class="search" v-if="isCollapsed == false">
                        <el-input
                            size="medium"
                            suffix-icon="el-icon-search"
                            v-model="keyword"
                            placeholder="搜索菜单">
                        </el-input>
                    </div>
                    <el-menu
                        background-color="#042C60"
                        text-color="#C0C4CC"
                        active-text-color="#ffffff"
                        default-active="0-0"
                        :default-openeds="['0-1']"
                        :collapse="isCollapsed"
                        class="main-menu">
                        <el-menu-item index="0">
                            <i class="el-icon-house"></i>
                            <a href="<?php echo request()->root(); ?>/admin/">首页</a>
                        </el-menu-item>
                        {core:menu_list id="vo"}
                            <?php if($vo['menu_type'] == 0): ?>
                                <el-submenu index="0-{$key}">
                                    <template slot="title">
                                      <i class="el-icon-folder-opened"></i>
                                      <span>{$vo.title}</span>
                                    </template>
                                    <?php if(isset($vo['children'])): ?>
                                        {volist name="vo.children" id="vo1"}
                                            <?php if($vo1['menu_type'] == 1): ?>
                                                <el-menu-item index="1-{$key}">
                                                    <a href="<?php echo request()->root(); ?>/admin{$vo1['path']}{$vo1.api_params}.html">{$vo1.title}</a>
                                                </el-menu-item>
                                            <?php endif; ?>
                                        {/volist}
                                    <?php endif; ?>
                                </el-submenu>
                            <?php endif; ?>
                        {/core:menu_list}
                    </el-menu>
                </el-aside>
                <el-main>
                    <el-container>
                        <el-header class="header flex" style="justify-content: space-between;">
                            <div>
                                <span @click="collapsedSider" :class="isCollapsed ? 'hidden-xs-only el-icon-s-unfold' : 'hidden-xs-only el-icon-s-fold'"></span>
                                <span @click="menuDisplay" class="hidden-sm-and-up el-icon-s-unfold"></span>
                            </div>
                            <div>
                                <a target="_blank" href="<?php echo request()->domain(); ?><?php echo request()->rootUrl(); ?>">访问前台</a>
                                <span @click="cleanRuntime">清除缓存</span>
                            </div>
                        </el-header>
                        <div class="main">
                            {block name="main"}主内容{/block}
                        </div>
                    </el-container>
                </el-main>
            </el-container>
            <div @click="menuDisplay" :class="isDisplay ? 'base-mask main-aside-display' : 'base-mask'"></div>
        </div>
    </div>
</body>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    {block name="vue"}
        <script>
            {include file="core@admin/public:util" /}
            new Vue({
                el: '#app',
                data: function() {
                    return {
                        {include file="core@admin/public:data" /}
                    }
                },
                methods: {
                    {include file="core@admin/public:methods" /}
                }
            });
        </script>
    {/block}
    {block name="script"}{/block}
</html>
